<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列类型</title>
  <script src="./js/jexcel.js"></script>
  <script src="./js/jsuites.js"></script>
  <link rel="stylesheet" href="./css/jsuites.css" type="text/css" />
  <link rel="stylesheet" href="./css/jexcel.css" type="text/css" />
</head>

<body>
  <h1>列类型</h1>
  <p>在jspreadsheet javascript电子表格中可用的本地类型如下:</p>
  <ul>
    <li>text</li>
    <li>numeric</li>
    <li>hidden</li>
    <li>dropdown</li>
    <li>autocomplete</li>
    <li>checkbox</li>
    <li>radio</li>
    <li>calendar</li>
    <li>image</li>
    <li>color</li>
    <li>html</li>
  </ul>

  <div id="spreadsheet"></div>
</body>
<script>
  var data = [
    ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
    ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
  ];

  jspreadsheet(document.getElementById('spreadsheet'), {
    data: data,
    columns: [
      { type: 'text', title: 'Car', width: 120 },
      { type: 'dropdown', title: 'Make', width: 200, source: ["Alfa Romeo", "Audi", "Bmw"] },
      { type: 'calendar', title: 'Available', width: 200 },
      { type: 'image', title: 'Photo', width: 120 },
      { type: 'checkbox', title: 'Stock', width: 80 },
      { type: 'numeric', title: 'Price', width: 100, mask: '$ #.##,00', decimal: ',' },
      { type: 'color', width: 100, render: 'square', }
    ]
  });
</script>

</html>